<template>
  <view class="sv-tiptap-toolbar">
    <view class="tool-group" v-for="(group, index) in tools" :key="index">
      <view class="tool-item" v-for="item in group" :key="item.name" @click="onTool(item)">
        <text :class="['iconfont', item.icon]"></text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { toolList } from '../common/tool-list'

const props = defineProps({
  tools: {
    type: Array,
    default: () => toolList
  },
  bindRef: {
    type: Object,
    default: () => {}
  }
})

function onTool(e) {
  switch (e.name) {
    case 'header':
      props.bindRef.cmd('setHeading', { level: 1 })
      break
    default:
      break
  }
  props.bindRef.cmd('focus')
}
</script>

<style lang="scss">
@import '../icons/iconfont.css';

.sv-tiptap-toolbar {
  --tool-group-bgcolor: #ffffff;
  --tool-group-gap: 8px;
  --tool-group-padding: 4px;
  --tool-group-border-radius: 8px;
  --tool-group-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.02);
  --tool-divider-color: #cccccc;
  --tool-item-bgcolor: #f4f4f4;
  --tool-item-active: #e6e6e6;
  --tool-item-padding: 0px 4px;
  --tool-item-border-radius: 4px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--tool-group-gap);
  margin-bottom: var(--tool-group-gap);
  box-sizing: border-box;

  .tool-group {
    display: flex;
    align-items: center;
    gap: var(--tool-group-padding);
    position: relative;
    background-color: var(--tool-group-bgcolor);
    border-radius: var(--tool-group-border-radius);
    padding: var(--tool-group-padding);
    box-sizing: border-box;
    box-shadow: var(--tool-group-shadow);

    &::after {
      content: '';
      display: block;
      position: absolute;
      right: calc(0px - var(--tool-group-gap) / 2);
      width: 1rpx;
      height: 60%;
      background-color: var(--tool-divider-color);
    }

    &:last-child::after {
      content: '';
      display: none;
    }

    .tool-item {
      padding: var(--tool-item-padding);
      box-sizing: border-box;
      background-color: var(--tool-item-bgcolor);
      box-sizing: border-box;
      cursor: pointer;
      border-radius: var(--tool-item-border-radius);

      &:active {
        background-color: var(--tool-item-active);
      }
    }
  }
}
</style>
